<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@include file="common.jsp"%>

<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description"
	content="An Amaze UI template that helps you build fast, modern mobile web apps.">
<meta name="viewport"
	content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<title>停车订单</title>

<!-- Set render engine for 360 browser -->
<meta name="renderer" content="webkit">

<!-- No Baidu Siteapp-->
<meta http-equiv="Cache-Control" content="no-siteapp" />

<link rel="icon" type="image/png" href="i/favicon.png">

<!-- Add to homescreen -->
<link rel="manifest" href="manifest.json">

<!-- Fallback to homescreen for Chrome <39 on Android -->
<meta name="mobile-web-app-capable" content="yes">
<meta name="application-name" content="Web Starter Kit">
<link rel="icon" sizes="192x192"
	href="i/touch/chrome-touch-icon-192x192.png">

<!-- Add to homescreen for Safari on iOS -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title"
	content="Amaze UI Sfavicon.pngtarter Kit">
<link rel="apple-touch-icon" href="i/touch/apple-touch-icon.png">

<!-- Tile icon for Win8 (144x144 + tile color) -->
<meta name="msapplication-TileImage"
	content="i/touch/ms-touch-icon-144x144-precomposed.png">
<meta name="msapplication-TileColor" content="#0e90d2">

<style type="text/css">
	.price-font {
  color: #fe6696;
  width: 50%;
  float: left;
}
.font-text-right {
  text-align: right;
}
.am-gallery-default .am-gallery-title {
  color: #333333;
}
.am-gallery-default .am-gallery-title {
  margin-top: 0px;
}
.text-border {
  padding: 2px;
  border-left: 1px solid #DEDEDE;
  border-right: 1px solid #DEDEDE;
  border-bottom: 1px solid #DEDEDE;
}
.am-tabs-d2 .am-tabs-nav {
  background-color: #fff;
}
.am-tabs-d2 .am-tabs-nav > .am-active:after {
  border-bottom-color: #fff;
}
.am-tabs-d2 .am-tabs-nav li {
    height: 50px;
}
.am-tabs-d2 .am-tabs-nav a {
    line-height: 50px;
}
.am-tabs-d2 .am-tabs-nav > .am-active a {
  color: #ec6c2c;
  line-height: 50px;
  font-weight: bold;
}
.am-tabs-d2 .am-tabs-nav > .am-active {
  border-bottom: 3px solid #ec6c2c;
  background-color: #fff;
}
.am-tabs-bd .am-tab-panel {
  padding: 0;
}
.am-tabs-bd {
  border: none;
}
.am-list {
    margin-bottom: 0;
}

.am-list-news-default .am-list>li {
    border-color: #dddddd;
}

.am-titlebar-multi .am-titlebar-title {
    font-weight: normal;
}
</style>

</head>
<body>

<div id="orderList">

<!-- 
	<figure id="empty" data-am-widget="figure" class="am am-figure am-figure-default "data-am-figure="{}" style="margin: 0;">
	  	<div style="text-align: center;" align="center">
			<img src="<%=basePath%>static/images/wechat/no_records.png" style="margin:0 auto; padding: 0px; height: 8em; width: 8em; " />
	  		<div style="margin-top: 0.3em;" >暂无停车信息</div>
		</div>
	</figure>
 -->
	<div data-am-widget="list_news" class="am-list-news am-list-news-default" style="margin:0; margin-top:10px; background: #fff; border-top: 1px solid #dddddd;" >
	  <div class="am-list-news-bd">
		  <ul class="am-list" style="margin-left:10px; margin-right: 10px;">
		      <li class="am-g am-list-item-desced" style=" border-top: none; ">
		      	<div class="am-u-sm-8" style="color:#2baf2b;padding-left: 0; ">已完成</div>
		      </li>
		  </ul>
	  </div>
    </div>
	<div data-am-widget="titlebar" class="am-titlebar am-titlebar-multi" style="border:none; margin:0; padding-left: 10px; padding-right: 10px; height: 100px; background: #FFF;">
		<nav style="padding-top: 10px; padding-bottom: 10px; ">
			<img src="<%=basePath%>static/images/wechat/pay_fail.png" style="width: 80px; height: 80px;">
		</nav>
		<div class="am-titlebar-title" style="padding: 0.6em 0 0.6em 1.2em;">
			<div class="am-list-item-text" style="font-size: 1.6rem; padding: 2px 0; color: #666666;">
				<span><img src="<%=basePath%>static/images/wechat/parking_inside.png" style="width: 40px;"></span>
				<span style="color: #292929" >腾达智能测试停车场A</span>
			</div>
			<div class="am-list-item-text" style="font-size: 1.6rem; padding: 2px 0; color: #666666;">
				<span>车牌号码：</span>
				<span style="color: #292929;">粤B12345</span>
			</div>
			<div class="am-list-item-text" style="font-size: 1.6rem; padding: 2px 0; color: #666666;">
				<span>付款方式：</span>
				<span style="color: #292929;">微信支付</span>
			</div>
		</div>
	</div>
	<div data-am-widget="list_news" class="am-list-news am-list-news-default" style="margin:0; border-bottom: none; background: #FFF;" >
	  <div class="am-list-news-bd">
		  <ul class="am-list" style="margin-left:10px; margin-right: 10px;">
	  		  <li class="am-g am-list-item-desced" style="">
		      	<div class="am-u-sm-6" style="padding:0;">
		      		<img src="<%=basePath%>static/images/wechat/parking_start.png" alt="" style="width: 22px; height: 22px;" >
		      		<a style="color: #666666; font-size: 1.3rem;">2016-09-30 12:43:21</a>
		      	</div>
		      	<div class="am-u-sm-6" style="padding:0; text-align: right; ">
		      		<img src="<%=basePath%>static/images/wechat/parking_end.png" alt="" style="width: 22px; height: 22px;" >
		      		<a style="color: #666666; font-size: 1.3rem;">2016-09-30 12:43:21</a>
		      	</div>
		      </li>
		      <li class="am-g am-list-item-desced" style=" border-bottom: none;">
		      	<div class="am-u-sm-12" style="text-align: left; color: #666666; padding-left: 0;">
		      		共计:<span style="color: #f62e54; font-weight: bold;">￥9.09</span>
		      	</div>
		      </li>
		  </ul>
	  </div>
    </div>
	
	<div data-am-widget="list_news" class="am-list-news am-list-news-default" style="margin:0; margin-top:10px; background: #fff; border-top: 1px solid #dddddd;" >
	  <div class="am-list-news-bd">
		  <ul class="am-list" style="margin-left:10px; margin-right: 10px;">
		      <li class="am-g am-list-item-desced" style=" border-top: none; ">
		      	<div class="am-u-sm-8" style="color:#2baf2b;padding-left: 0; ">已完成</div>
		      </li>
		  </ul>
	  </div>
    </div>
	<div data-am-widget="titlebar" class="am-titlebar am-titlebar-multi" style="border:none; margin:0; padding-left: 10px; padding-right: 10px; height: 100px; background: #FFF;">
		<nav style="padding-top: 10px; padding-bottom: 10px; ">
			<img src="<%=basePath%>static/images/wechat/pay_success.png" style="width: 80px; height: 80px;">
		</nav>
		<div class="am-titlebar-title" style="padding: 0.6em 0 0.6em 1.2em;">
			<div class="am-list-item-text" style="font-size: 1.6rem; padding: 2px 0; color: #666666;">
				<span><img src="<%=basePath%>static/images/wechat/parking_outside.png" style="width: 40px;"></span>
				<span style="color: #292929" >腾达智能测试停车场B</span>
			</div>
			<div class="am-list-item-text" style="font-size: 1.6rem; padding: 2px 0; color: #666666;">
				<span>车牌号码：</span>
				<span style="color: #292929;">粤B12345</span>
			</div>
			<div class="am-list-item-text" style="font-size: 1.6rem; padding: 2px 0; color: #666666;">
				<span>付款方式：</span>
				<span style="color: #292929;">微信支付</span>
			</div>
		</div>
	</div>
	<div data-am-widget="list_news" class="am-list-news am-list-news-default" style="margin:0; border-bottom: none; background: #FFF;" >
	  <div class="am-list-news-bd">
		  <ul class="am-list" style="margin-left:10px; margin-right: 10px;">
	  		  <li class="am-g am-list-item-desced" style="">
		      	<div class="am-u-sm-6" style="padding:0;">
		      		<img src="<%=basePath%>static/images/wechat/parking_start.png" alt="" style="width: 22px; height: 22px;" >
		      		<a style="color: #666666; font-size: 1.3rem;">2016-09-30 12:43:21</a>
		      	</div>
		      	<div class="am-u-sm-6" style="padding:0; text-align: right; ">
		      		<img src="<%=basePath%>static/images/wechat/parking_end.png" alt="" style="width: 22px; height: 22px;" >
		      		<a style="color: #666666; font-size: 1.3rem;">2016-09-30 12:43:21</a>
		      	</div>
		      </li>
		      <li class="am-g am-list-item-desced" style=" border-bottom: none;">
		      	<div class="am-u-sm-12" style="text-align: left; color: #666666; padding-left: 0;">
		      		共计:<span style="color: #f62e54; font-weight: bold;">￥9.09</span>
		      	</div>
		      </li>
		  </ul>
	  </div>
    </div>
</div>

 	<!--更多在底部-->
  	<div id="more" class="am-list-news-ft">
    	<a class="am-list-news-more am-btn am-btn-default " href="#" onclick="queryMore()">点击加载更多 &raquo;</a>
  	</div>

<div class="am-modal am-modal-alert" tabindex="-1" id="my-alert">
	  <div class="am-modal-dialog">
	    <div id="my-text" class="am-modal-bd">
	      Hello world！
	    </div>
	    <div class="am-modal-footer">
	      <span class="am-modal-btn">确定</span>
	    </div>
	  </div>
	</div>

<script>
	var userId = '${userId}';
	var uuid = '${uuid}';
	var ucode = '${ucode}';
	var winWidth;
	var winHeight;
	var pageNumber = 1;
	var pageSize = 10;
	var moreTag = 0;
	var imageServer;
	$(function(){
		winWidth = $(document).width();
		winHeight = $(document).height();
		search();
	});
	
	
	function search()
	{
		var url = "<%=basePath%>api/findParkingOrderlist";
		$.ajax(url, {
            type: 'post',
            data:{ userId:userId, start:pageNumber, limit:pageSize },
            headers: { 'UUID-TOKEN': uuid },
            success: function(result){
                var rtn = JSON.parse(result);
                if(rtn.code == 1)
                {
                	var len = rtn.data.length;
                	imageServer = rtn.baseUrl;
                	if(len==0) {
                		appendEmptyHtml();
                	} else {
                		for(var i=0; i<len; i++)
                    	{
                    		appendHtml(rtn.data[i], i);
                    	}
                	}
                	if(pageNumber >= rtn.totalPage)
                	{
                		moreTag = 1;
                	}
                }else{
                	alertText(rtn.text);
                }
            }
        });
	}
	
	function appendEmptyHtml() {
		var marginTop = winHeight/4;
		var divHtml = '<figure id="empty" data-am-widget="figure" class="am am-figure am-figure-default " data-am-figure="{}" style="margin: 0;margin-top:'+marginTop+'px;">'
		  	+'<div style="text-align: center;" align="center">'
		  	+'<img src="<%=basePath%>static/images/wechat/no_records.png" style="margin:0 auto; padding: 0px; height:6em; width:6em;"/>'
		  	+'<div style="margin-top: 0.3em;" class="nick-name">暂无订单信息</div>'
		  	+'</div>'
		  	+'</figure>';
	    $("#orderList").append(divHtml);
	    $("#more").css("display", "none");
	}
	
	function appendHtml(obj, i)
	{
		var parkingTypeImage;
		var payTypeText;
		if(obj.parkingType==1) {
			parkingTypeImage = "<%=basePath%>static/images/wechat/parking_inside.png";
		} else if(obj.parkingType==2) {
			parkingTypeImage = "<%=basePath%>static/images/wechat/parking_outside.png";
		} else if(obj.parkingType==3) {  // 路边
			parkingTypeImage = "<%=basePath%>static/images/wechat/parking_outside.png";
		}
		
		if(obj.payType==2) {
			payTypeText = "微信支付";
		} else if(obj.payType==1) {
			payTypeText = "支付宝";
		} else if(obj.payType==5) {
			payTypeText = "余额";
		}
		
		var imageURL = "";
		if(null != obj.images && undefined != obj.images && "" != obj.images)
		{
			var imgArr = images.split("#");
			if(imgArr.length > 0)
			{
				imageURL = imageServer + imgArr[0];
			}
		}
		
		var liHtml = '<div data-am-widget="list_news" class="am-list-news am-list-news-default" style="margin:0; margin-top:10px; background: #fff; border-top: 1px solid #dddddd;" >'
			  +'<div class="am-list-news-bd">'
			  +'<ul class="am-list" style="margin-left:10px; margin-right: 10px;">'
			  +'  <li class="am-g am-list-item-desced" style=" border-top: none; ">'
			  +'	<div class="am-u-sm-8" style="color:#2baf2b;padding-left: 0; ">已完成</div>'
			  +'</li>'
			  +' </ul>'
			  +'</div>'
			  +'</div>'
			  +'<div data-am-widget="titlebar" class="am-titlebar am-titlebar-multi" style="border:none; margin:0; padding-left: 10px; padding-right: 10px; height: 100px; background: #FFF;">'
			  +'<nav style="padding-top: 10px; padding-bottom: 10px; ">'
			  +'<img id="'+i+'" src="'+imageURL+'" onerror="serDefaultImg('+ i +')" style="width: 80px; height: 80px;">'
			  +'</nav>'
			  +'<div class="am-titlebar-title" style="padding: 0.6em 0 0.6em 1.2em;">'
			  +'<div class="am-list-item-text" style="font-size: 1.6rem; padding: 2px 0; color: #666666;">'
			  +'	<span><img src="'+parkingTypeImage+'" style="width: 40px;"></span>'
			  +'	<span style="color: #292929" >'+obj.parkName+'</span>'
			  +'</div>'
			  +'<div class="am-list-item-text" style="font-size: 1.6rem; padding: 2px 0; color: #666666;">'
			  +'	<span>车牌号码：</span>'
			  +'<span style="color: #292929; padding-left: 4px;">'+obj.licenseNum+'</span>'
			  +'</div>'
			  +'<div class="am-list-item-text" style="font-size: 1.6rem; padding: 2px 0; color: #666666;">'
			  +'<span>付款方式：</span>'
			  +'	<span style="color: #292929;">'+payTypeText+'</span>'
			  +'</div>'
			  +'</div>'
			  +'</div>'
			  +'<div data-am-widget="list_news" class="am-list-news am-list-news-default" style="margin:0; border-bottom: none; background: #FFF;" >'
			  +'<div class="am-list-news-bd">'
			  +' <ul class="am-list" style="margin-left:10px; margin-right: 10px;">'
			  +'  <li class="am-g am-list-item-desced" style="">'
			  +'  	<div class="am-u-sm-6" style="padding:0;">'
			  +'  		<img src="<%=basePath%>static/images/wechat/parking_start.png" alt="" style="width: 22px; height: 22px;" >'
			  +' 		<a style="color: #666666; font-size: 1.3rem;">'+obj.enterTime+'</a>'
			  +' 	</div>'
			  +' 	<div class="am-u-sm-6" style="padding:0; text-align: right; ">'
			  +' 		<img src="<%=basePath%>static/images/wechat/parking_end.png" alt="" style="width: 22px; height: 22px;" >'
			  +' 		<a style="color: #666666; font-size: 1.3rem;">'+obj.leaveTime+'</a>'
			  +' 	</div>'
		      	+' </li>'
		      	+' <li class="am-g am-list-item-desced" style=" border-bottom: none;">'
		      	+'  	<div class="am-u-sm-12" style="text-align: left; color: #666666; padding-left: 0;">'
		      	+' 		共计:<span style="color: #f62e54; font-weight: bold;">￥'+obj.money+'</span>'
		      	+' 	</div>'
		      	+' </li>'
		      	+'</ul>'
		      	+'</div>'
		      	+'</div>';
		$('#orderList').append(liHtml);
	}
	
	function queryMore() {
		if(moreTag == 1)
		{
			alertText("没有更多数据！");
			return;
		}
		pageNumber = pageNumber + 1;
		search();
	}
	
	function serDefaultImg(domId){
		var errorURL = "<%=basePath%>static/images/parking/park1.jpg";
		var id = '#'+domId;
		$(id).attr("src", errorURL);
	}
	
</script>

</body>
</html>
